<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Mall - 首页</title>
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../assets/css/fontawesome-all.min.css"/>
    <link rel="stylesheet" href="../assets/css/animate.min.css"/>
    <link rel="stylesheet" href="../assets/css/magnific-popup.css"/>
    <link rel="stylesheet" href="../assets/css/nice-select.css"/>
    <link rel="stylesheet" href="../assets/css/pe-icon-7-stroke.css"/>
    <link rel="stylesheet" href="../assets/css/slick.css"/>
    <link rel="stylesheet" href="../assets/css/meanmenu.css"/>
    <link rel="stylesheet" href="../assets/css/swipper.css"/>
    <link rel="stylesheet" href="../assets/css/main.css"/>
</head>
<body>
<header>
    <div class="header-area bg-black-2 d-none d-lg-block">
        <div class="header-top-2">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xxl-3 col-lg-3">
                        <div class="header-left-2">
                            <div class="logo-2">
                                <a href="${pageContext.request.contextPath}/"><img src="../assets/img/logo/logo-white.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-9 col-lg-9">
                        <div class="header-right-2 text-end">
                            <div class="epix-header-form-2 d-inline-block ml-30" style="margin-right: 3%;">
                                <form action="#">
                                    <input type="text">
                                    <button type="submit"><i class="fal fa-search"></i></button>
                                </form>
                            </div>
                            <div class="epix-header-list-2 d-inline-block">
                                <ul>
                                    <li>
                                        <c:choose>
                                            <c:when test="${sessionScope.username!=null}">
                                                <a style="color: white">欢迎您：${sessionScope.username}</a>
                                                <span style="color: white">/</span>
                                                <a href="${pageContext.request.contextPath}/logout" id="logout"> 注销</a>
                                            </c:when>
                                            <c:when test="${sessionScope.username==null}">
                                                <a href="${pageContext.request.contextPath}/login">登录</a>
                                                <span style="color: white">/</span>
                                                <a href="${pageContext.request.contextPath}/register"> 注册</a>
                                            </c:when>
                                        </c:choose>
                                    </li>
                                    <li><a href="${pageContext.request.contextPath}/cart">购物车</a></li>
                                    <li><a href="${pageContext.request.contextPath}/order-list">历史订单</a></li>
                                    <c:if test="${sessionScope.isAdmin==true}">
                                        <li><a href="${pageContext.request.contextPath}/goodsAll.jsp">后台</a></li>
                                    </c:if>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<main>
    <div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <div class="object" id="first_object"></div>
                <div class="object" id="second_object"></div>
                <div class="object" id="third_object"></div>
            </div>
        </div>
    </div>
    <div class="slider-area-2">
        <div class="pl-50 pr-50">
            <div class="slider-active-2 default-slick-arrow swiper-container">
                <div class="swiper-wrapper">
                    <div class="single-slider swiper-slide bg-default slider-height d-flex align-items-center"
                         data-background="assets/img/slider/main-Banner-2.jpg">
                        <div class="container">
                            <div class="slider-content-2">
                                    <span class="epix-subtitle-2" data-animation="flipInX" data-delay=".2s">Save upto
                                        50%
                                        Flate</span>
                                <h3 class="epix-title-2" data-animation="flipInX" data-delay=".5s">Headphone</h3>
                            </div>
                        </div>
                    </div>
                    <div class="single-slider bg-default  swiper-slide slider-height d-flex align-items-center"
                         data-background="assets/img/slider/main-Banner-1.jpg">
                        <div class="container">
                            <div class="slider-content-2">
                                    <span class="epix-subtitle-2" data-animation="flipInX" data-delay=".2s">Save upto
                                        50%
                                        Flate</span>
                                <h3 class="epix-title-2" data-animation="flipInX" data-delay=".5s">Headphone</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slider-pagination">
                    <div class="swiper-button-next"><i class="fal fa-angle-right"></i></div>
                    <div class="swiper-button-prev"><i class="fal fa-angle-left"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-top: 2%;" class="shop-product-area pb-40">
        <div class="container">
            <div class="row">
                <div class="col-xxl-3 col-lg-4">
                    <div class="epix-sidebar-area">
                        <div class="epix-sidebar-widget mb-40">
                            <h4 class="epix-s-widget-title"> 分 类 </h4>
                            <div class="epix-taglist">
                                <ul>
                                    <li style="list-style: inside;">
                                        <a  <c:if test="${pageContext.request.getParameter('category-name')==null||\"\".equals(pageContext.request.getParameter('category-name'))}">
                                            style="font-size: 20px;color: deeppink"
                                        </c:if> href="${pageContext.request.contextPath}/">全部</a>
                                    </li>
                                    <c:forEach items="${requestScope.categories}" var="category">
                                        <li style="list-style: inside;">
                                            <a <c:if
                                                    test="${pageContext.request.getParameter('category-name')==category.category}">
                                                style="font-size: 20px;color: deeppink"
                                            </c:if> href="${pageContext.request.contextPath}/?category-name=${category.category}">${category.category}</a>
                                        </li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-9 col-lg-8 epix-shop-order">
                    <div class="epix-shop-products-display">
                        <div class="epix-shop-product-topbar">
                            <div class="epix-shop-product-main">
                                <div class="tab-content" id="nav-tabContent">
                                    <div class="tab-pane fade show active" id="grid-view">
                                        <div class="row">
                                            <c:forEach items="${requestScope.goods}" var="good">
                                                <div class="col-xxl-3 col-sm-6 col-md-4">
                                                    <div class="epix-single-product-3 mb-40 style-2 text-center swiper-slide">
                                                        <div class="epix-product-thumb-3">
                                                            <div style="width: 250px;height: 250px;">
                                                                <a href="${pageContext.request.contextPath}/detail?goods-id=${good.id}">
                                                                    <img style="width: 100%" src="${good.picture}"></a>
                                                            </div>
                                                        </div>
                                                        <span class="price"><strong>￥</strong>${good.price}</span>
                                                        <h5 class="epix-p-title epix-p-title-3"><a
                                                                href="${pageContext.request.contextPath}/detail?goods-id=${good.id}">${good.goods_name}</a>
                                                        </h5>
                                                    </div>
                                                </div>
                                            </c:forEach>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <c:if test="${requestScope.pageNum>1}">
                <div class="row justify-content-xxl-end">
                    <div class="col-xxl-12">
                        <div class="epix-pagination pagination-area mt-40 mb-70">
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-center justify-xl-content-left">
                                    <li class="page-item <c:if test="${pageContext.request.getParameter('page-index')==1||pageContext.request.getParameter('page-index')==null}">disabled</c:if>">
                                        <a class="page-link prev"
                                           href="${pageContext.request.contextPath}/?category-name=${pageContext.request.getParameter('category-name')}&page-index=${pageContext.request.getParameter('page-index')-1}"
                                           tabindex="-1"><i class="fal fa-angle-left"></i> Prev</a>
                                    </li>
                                    <c:forEach begin="1" end="${requestScope.pageNum}" step="1" var="defaultPageIndex">
                                        <li class="page-item">
                                            <a  <c:if
                                                    test="${defaultPageIndex==pageContext.request.getParameter('page-index')||(defaultPageIndex==1&&pageContext.request.getParameter('page-index')==null)}">
                                                style="background: black;color: white;" </c:if>
                                                    class="page-link"
                                                    href="${pageContext.request.contextPath}/?category-name=${pageContext.request.getParameter('category-name')}&page-index=${defaultPageIndex}">
                                                    ${defaultPageIndex}
                                            </a></li>
                                    </c:forEach>
                                    <li class="page-item <c:if test="${pageContext.request.getParameter('page-index')==requestScope.pageNum}">disabled</c:if>">
                                        <a class="page-link next"
                                           href="${pageContext.request.contextPath}/?category-name=${pageContext.request.getParameter('category-name')}&page-index=${pageContext.request.getParameter('page-index')+1}">Next
                                            <i class="fal fa-angle-right"></i></a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </c:if>
        </div>
    </div>
</main>
<div class="footer-copyright-2" style="position: fixed;bottom: 0;width: 100%;">
    <div class="container">
        <div class="row">
            <div class="col-xxl-9 col-xl-6 col-lg-6">
                <p>Copyrights © 2021 EPIXX. All Rights Reserved.</p>
            </div>
        </div>
    </div>
</div>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/isotope.pkgd.min.js"></script>
<script src="../assets/js/slick.min.js"></script>
<script src="../assets/js/swipper-bundle.min.js"></script>
<script src="../assets/js/jquery.meanmenu.min.js"></script>
<script src="../assets/js/wow.min.js"></script>
<script src="../assets/js/nice-select.js"></script>
<script src="../assets/js/jquery.scrollUp.min.js"></script>
<script src="../assets/js/jquery.elevatezoom.js"></script>
<script src="../assets/js/countdown.min.js"></script>
<script src="../assets/js/jquery-ui-slider-range.js"></script>
<script src="../assets/js/jquery.magnific-popup.min.js"></script>
<script src="../assets/js/imagesloaded.pkgd.min.js"></script>
<script src="../assets/js/mouse-wheel.min.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
</body>

</html>